<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NW.js Demo #3</title>
    <style>
      body {
        padding: 80px 100px;
        font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
        background: #ece9e9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ece9e9));
        background: #ece9e9 -moz-linear-gradient(top, #fff, #ece9e9);
        background-repeat: no-repeat;
        color: #555;
        -webkit-font-smoothing: antialiased;
      }
      * {
        margin: 0;
        padding: 0;
        outline: 0;
      }
      h1 {
        color: #343434;
        margin-bottom: 15px;
        font-size: 18px;
      }
      ul {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      li {
        list-style: none;
        float: left;
        width: 30%;
        line-height: 25px;
        margin: 1px;
      }
      a {
        display: block;
        height: 25px;
        border: 1px solid transparent;
        border-radius: 5px;
        overflow: hidden;
        white-space: nowrap;
        color: #555;
        text-decoration: none;
        padding: 0 10px 0 30px;
        background-repeat: no-repeat;
        background-position: 8px 5px;
      }
      a:hover {
        color: #303030;
        background-color: rgba(255, 255, 255, 0.65);
        border: 1px solid #ececec;
      }
      a.directory {
        background-image: url();
      }
      a.file {
        background-image: url();
      }
    </style>
  </head>
  <body>
    <h1>NW.js Demo #3</h1>
    <ul></ul>
    <script>
      const fs = require("node:fs");
      const { exec } = require("node:child_process");
      document.querySelector("ul").innerHTML =
        `<li>
          <a class="directory" href="javascript:;"
            onclick="openWindow('./demo/api/api.html')"
          >API Example</a>
        </li>` +
        fs
          .readdirSync("./demo")
          .filter((file) => /^#\d+/i.test(file))
          .map(
            (file) =>
              `<li>` +
              (fs.statSync("./demo/" + file).isDirectory()
                ? `<a class="directory" href="javascript:;"
                onclick="runApp('./demo/${file}')">${file}</a>`
                : `<a class="file" href="javascript:;"
                onclick="openWindow('./demo/${encodeURIComponent(file)}')">${file}</a>`) +
              `</li>`
          )
          .join("");
      window.runApp = (dir) => exec(`"${process.execPath}" "${dir}"`, () => {});
      window.openWindow = (url) => nw.Window.open(url, { new_instance: true, position: "center" });

      // 兜底`close`事件Bug：https://github.com/nwjs/nw.js/issues/7808
      chrome.tabs.onRemoved.addListener(() => {
        nw.Window.getAll((list) => {
          list.forEach((win) => {
            if (win.cWindow.tabs.length === 0) {
              win.close(true);
            }
          });
        });
      });
    </script>

    <script>
      window.addEventListener("keydown", (e) => {
        if (e.key === "F5") nw.Window.get().reload();
      });
    </script>
  </body>
</html>
